import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly2.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import Ground2D from '../jsm/Ground2D.js'

window.onload = function () {

    const backColor = new Color("rgba(0,0,0,1)");

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    var vm4 = new Matrix4();
    var mm4 = new Matrix4();
    let u_Vm4 = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
    gl.uniformMatrix4fv(u_Vm4, false, vm4.elements);
    let u_Mm4 = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
    gl.uniformMatrix4fv(u_Mm4, false, mm4.elements);


    const posiCount = 2;
    const sizeCount = 1;
    const colorCount = 4;
    const allCount = posiCount + sizeCount + colorCount;

    const elementBytes = new Float32Array().BYTES_PER_ELEMENT;

    let arr = [
        -0.2, 0.0, 10, 1, 0, 0, 1,
        0.0, 0.5, 10, 0, 1, 0, 1,
        0.2, 0.0, 10, 0, 0, 1, 1,
    ];

    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(arr), gl.STATIC_DRAW);


    const a_position = gl.getAttribLocation(gl.program, 'a_Position');
    gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, allCount * elementBytes, 0);
    gl.enableVertexAttribArray(a_position);

    const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
    gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, allCount * elementBytes, (posiCount) * elementBytes);
    gl.enableVertexAttribArray(a_PointSize);

    const a_Color = gl.getAttribLocation(gl.program, 'a_Color');
    gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, allCount * elementBytes, (posiCount + sizeCount) * elementBytes);
    gl.enableVertexAttribArray(a_Color);


    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);
    gl.drawArrays(gl.TRIANGLES, 0, arr.length / allCount);






}